<template>
    <div class="app-container home">
        <van-nav-bar :title="routerInfo.meta.title || null" left-text=""  @click-left="onClickLeft" :left-arrow="exit" safe-area-inset-top>
            <template #left v-if='routerInfo.path !== "/terminal" && routerInfo.path !== "/home" && routerInfo.path !== "/mine" '>
                <!--          <van-icon name="search" size="18" />-->
                <img src="@/assets/exit.png" style="height: 20px;width: 20px" />
            </template>
            <template #title v-if="routerInfo.path === '/home'" >
                <div style="display: flex;align-items: center" @click="getMySwitch">
                   <span>{{ agentName }}</span>
                    <img src="@/assets/zk.png" style="height: 20px" alt="">
                </div>
            </template>
            <template #right>
                <div @click="onClickRight"> {{ rightInfo.name }} </div>
            </template>
        </van-nav-bar>
        <van-popup v-model:show="showSwitch" position="bottom" :style="{ padding: '10px',background:'#eff2f5',height:'50vh'}">
            <view class="popup">
                <div class="head">
                    切换机构
                </div>
                <div class="item" v-for="item in content" :key="item.agentNo" @click="choose(item)">
                    <div class="right">
                        <img class="select" v-if="item.checked == 'true'" src="@/assets/yes.png" />
                    </div>
                    <div class="left">
                        <div class="top"> <text class="text">{{item.agentName}}</text></div>
                        <!--            <div class="top"> <text class="text">山东信支付金融服务外包有限公司</text></div>-->
                        <div class="bottom"><text class="text1">{{ item.agentNo }}</text></div>
                    </div>
                    <div class="center">
                        <img v-show="item.brandSource === 'QFB'" style="height: 38px;width: 110px;" src="@/assets/qfb.png" />
                    </div>
                </div>
            </view>
        </van-popup>
    </div>
</template>

<script setup name="NavBar">
import {
    computed,
    watch,
} from 'vue';
import store from "@/store"
import { MySwitch, SwitchLogin } from "@/api"
import { findAgentInfoByAgentNo } from "@/api/dataAnalysis"
import { agentFindByAgentNo } from "@/api/agent"
const exit = ref(false)
const showSwitch = ref(false)
const rightInfo = ref({})
const content = ref([])
const presentRouter = ref('')
const routerInfo = ref({meta:{}})
const myInfo = ref(store.state.user.userInfo)
const agentName = ref('未认证')
const router = useRouter()
setTimeout(()=>{
    if(store.state.user.userInfo.agentBean.id){
        agentName.value = store.state.user.userInfo.agentBean.agentName
    }
},500)
const getMySwitch = ()=>{
    MySwitch({}).then(res=>{
        content.value = res.object
        showSwitch.value = true
    })
}
const choose = (item)=> {
    SwitchLogin({
        deviceType: 'IOS',
        imei: '',
        userName: item.userName,
    }).then(res => {
        store.dispatch("user/GetUserInfo", res.object.token)
        store.dispatch("user/GetUserInfo1", res.object.agentNo)
        agentFindByAgentNo({}).then(res=>{
            store.dispatch("user/GetUserAllInfo", res.object)
            console.log(res.object)
            agentName.value = res.object.agentBean.agentName
            showSwitch.value = false
        })
    })
}
const onClickLeft = () => history.back();

const getShowTask = computed(()=>{
    //返回的是ref对象
    return store.state.data.routerInfo
})

watch(getShowTask, (newVal, oldVal) => {
    routerInfo.value = newVal
    if(newVal.path === "/terminal" || newVal.path === "/home" || newVal.path === "/mine" ){
        agentName.value = store.state.user.userInfo.agentBean.agentName
        exit.value = false
    }else{
        exit.value = true
    }
}, {immediate:true,deep:true});
</script>

<style scoped lang="scss">

.popup {
    border-radius: 10px 10px 0 0;
    .head {
        text-align: center;
        font-size: 17px;
        padding: 10px;
        font-weight: 700;
    }

    .item {
        margin-top: 10px;
        padding: 10px;
        border-radius: 6px;
        background: #fff;
        display: flex;
        flex-direction: row;
        line-height: 25px;
        justify-content: space-between;
        align-items: center;

        .right {
            height: 100%;
            width: 30px;
            flex-shrink: 0;
        }

        .left {
            flex: 1;
            min-width: 0;
            .top {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }

    .select {
        height: 20px;
        width: 20px;
    }

    .text {
        font-size: 15px;
        color: #000000;
    }

    .text1 {
        font-size: 13px;
        margin-top: 5px;
        color: #9A9A9A;
    }
}
</style>

